@mixin placeholder($color) {
  &::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: $color;
    /* Firefox */
    opacity: 1;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: $color;
  }

  &::-ms-input-placeholder {
    /* Microsoft Edge */
    color: $color;
  }
}

.input {
  box-sizing: border-box;
  height: 40px;
  width: 100%;
  font-family: inherit;
  font-size: 1em;
  color: var(--input-color);

  background: transparent;
  border: none;
  border-bottom: 1px solid var(--input-underline);
  padding: 8px 0;

  @include placeholder(var(--input-placeholder));

  &:focus {
    outline: none;
    border-bottom: 1px solid var(--primary);
  }
}
.error {
  border-bottom: 1px solid var(--alert);
}
.disabled {
  border-bottom: 1px solid var(--input-disabled);
  @include placeholder(var(--input-disabled));
}

.label {
  font-size: 14px;
  color: var(--input-label);
}
.asterisk {
  color: var(--alert);
}
.labelDisabled {
  color: var(--input-disabled);
}
.errorMessage {
  font-size: 12px;
  color: var(--alert);
  margin-top: 5px;
}
.hint {
  font-size: 12px;
  color: var(--input-hint);
  margin-top: 5px;
  white-space: pre-wrap;
}
